<template>
  <div class="day-wrap" :class="{ 'no-work': dayData.status == 0 }" @click.stop="handleShowAdd()">
      <div class="day-tag-item" >
        <a-badge v-if="dayData.status == 1" status="success" text="正常" />
        <a-badge v-else-if="dayData.status == 2" status="warning" :text="`迟到${dayData.lateTime}分钟`" />
        <a-badge v-else-if="dayData.status == 3" status="warning" text="上班缺卡" />
        <a-badge v-else-if="dayData.status == 4" status="warning" text="下班缺卡" />
        <a-badge v-else-if="dayData.status == 5" status="error" text="旷工" />
        <a-badge v-else-if="dayData.status == 0" color="#ccc" text="休息" />
      </div>
      <div class="day-tag-item can-hover" v-for="it in dayData.content" :key="it.id" v-if="it.status != -1"  @click.stop="handleShowUpdate(it)" :title="it.content">
        <a-tag v-if="it.type == 1" color="#108ee9">出勤日</a-tag>
        <a-tag v-else-if="it.type == 2" color="#CCCCCC">休息日</a-tag>
        <a-tag v-else color="#87d068">正常考勤</a-tag>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  components: {},
  props: {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  destroyed(){},
}

</script>
<style lang='less' scoped>
.day-wrap {
  height: 100px;
  width: 100%;
  
  position: relative;
  display: flex;
  // align-items: center;
  justify-content: center;
  // flex-wrap: wrap;
  flex-direction: column;
  overflow-y: auto;
  .time {
    position: absolute;
    top: 5px;
    right: 10px;
    line-height: 20px;
  }
  &.no-work {
    background-color: #e9e9e975;
  }
  &.success {
    background-color: #52c41a;
  }
  &.warning {
    background-color: #faad14;
  }
  &.error {
    background-color: #f5222d;
  }
  .day-tag-item{
    padding: 2px 16px;
    &.can-hover:hover {
      background-color: #469beb;
      color: #fff;
      border-radius: 2px;
      &/deep/ .ant-badge .ant-badge-status-text{
        color: #fff;
      }
      // color: #fff;
    }
  }
}
</style>